<template>
	<view class="web">
		<!-- 报修 -->
		<!-- 导航 -->
		<!-- <view class="nav">
			<uni-nav-bar class="header" :border="false" left-icon="left" leftText="返回" title="报修" />
		</view> -->
		<!-- 导航 -->
		<!-- 身体 -->
		 
		<view class="body">
			<view class="body_inp">
				<span>类型</span>
				<picker @change="bindPickerChange" range-key="name" :value="index" :range="types">
					<span>

						{{index===null ? "请选择报修类型" : types[index].name}}
						<i class="iconfont icon-gengduo"></i>
					</span>
				</picker>
			</view>
			<view class="body_inp">
				<span class="tit">报修地址</span>
				<span class="input">
					<input v-model="model.address" type="text" />
					<i class="iconfont icon-gengduo"></i>
				</span>
			</view>
			<view class="body_inp">
				<span class="tit">联系电话</span>
				<span class="input">
					<input v-model="model.tel" type="text" />
					<i class="iconfont icon-gengduo"></i>
				</span>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="text_box">
			<input v-model="model.content" type="text" placeholder="请输入报修问题,以便维修人员尽快为您解决" />
		</view>
		<!-- 输入框 -->
		<view class="phon">
			<view @click="selectImg" class="icon">
				<i class="iconfont icon-xiangji"></i>
			</view>
			<view class="img">
				<view v-for="(item,index) in model.images" :key="item.url" class="img_tu">
					<image :src="baseImgUrl+item.url" mode=""></image>
					<view @click="delImg(item.url)" class="wrong">×</view>
				</view>
				 
			</view>
		</view>
		<!-- 身体 -->
		<!-- 按钮 -->
		<view @click="submit" class="btn">确认报修</view>
		<!-- 按钮 -->
	</view>
</template>

<script>
	import {add,getRepairsType} from '../../api/repairs.js'
	import {IMAGE_URL} from '../../utils/config.js'
	import { login } from '../../api/login.js';
import {chooseImage,uploadFile} from '../../utils/images.js'
	export default {
		data() {
			return {
				baseImgUrl:IMAGE_URL,
				index: null,
				model: {
					id: 0,
					address: "",
					content: "",
					tel: "",
					type: null,
					images: []
				},

				types: []
			}
		},
		onLoad() {
			this.getType();
		},
		onNavigationBarButtonTap(e){
			if(e.index===0){
				uni.navigateTo({
					url:"/pages/repairs/list"
				})
			}
		},
		methods: {
			
			async getType(){
				
				const res=await getRepairsType();
				if(res.errCode===10000){
					this.types=res.data.list;
				}
				
				
			},
			async submit(){
				if(!this.model.type){
					uni.showToast({
						title:"请选择报修类型",icon:"none"
					})
					return ;
				}
				if(!this.model.address){
					uni.showToast({
						title:"请填写报修地址",icon:"none"
					})
					return ;
				}
				const res=await add(this.model);
				if(res.errCode===10000){
					uni.showToast({
						title:"提交成功",icon:"none"
					})
				}
				else{
					uni.showToast({
						title:res.errMsg,icon:"none"
					})
				}
				
			},
			delImg(val){
				
				this.model.images=this.model.images.filter(item=>item.url!=val);
				// console.log(this.model.images);
				// console.log(item);
				// this.model.images.splice(index,1)
			},
			bindPickerChange(e) {

				this.index = e.detail.value;
				this.model.type = this.types[this.index].id;
				console.log(e.detail.value);

			},
			async selectImg(){
				
				const files=await chooseImage();
				for (let i=0;i<files.length;i++) {
					
					let res=await uploadFile(files[i]);
					if(res.errCode===10000){
						
						this.model.images.push({url:res.data})
					}
					console.log(res);
					
				}
				
				console.log(files);
				
				
			}
		}
	}
</script>

<style>
	@import url('../../static/css/repairs.css');
</style>